<template>
	<view class="content">
		<view class="file-select-container" @click="_autoClose" v-if="isChoose === true">
			<view class="file-select-wrap" @click.stop>
				<view class="file-select-header">
					<text>文件选择</text>
				</view>
				<scroll-view class="s-f-scroll-view" scroll-y>
					<block>
						<view @click.stop="backToPrevent" class="s-f-item" v-if="treeList.length > 1">
							<view class="s-f-item-path-name">
								<image class="s-f-icon" :src="source.folder"></image>
								<view>上级目录</view>
							</view>
						</view>
						<view @click.stop="showDir(item.isDirectory, item.path)" class="s-f-item" v-for="(item,i) in flileList" :key="i">
							<view class="s-f-item-path-name">
								<image class="s-f-icon" :src="source.folder" v-if="item.isDirectory"></image>
								<image class="s-f-icon" :src="source.file" v-if="!item.isDirectory"></image>
								<view class="s-f-text"><text>{{item.pathName}}</text></view>
							</view>
							<image :src="source.checked" class="s-f-icon" v-if="checkList.indexOf(item.path.toString()) > -1"></image>
						</view>
					</block>
				</scroll-view>
				<view class="file-select-footer">
					<view class="s-f-btn s-f-cancel" @click="closeHandle">取消</view>
					<view class="s-f-btn s-f-okey" @click="okeyHandle">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import files from "./files.js"
	export default {
		props: {
			autoclose: {
				type: Boolean,
				default: true
			},
			count: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				title: 'Hello',
				flileList: [],
				treeList: ["root"],
				checkList: [], // 文件选择标记
				checkDataList: [], // 最终数据
				flag: 0,
				source: {
					file: "",
					folder: "",
					checked: ""
				},
				isChoose: false
			}
		},
		onLoad() {

		},
		methods: {
			closeHandle() {
				this.treeList = ["root"]
				this.checkList = [] // 文件选择标记
				this.checkDataList = [] // 最终数据
				this.isChoose = false
			},
			_autoClose() {
				if (this.autoclose !== true) {
					return
				}
				this.checkList = [] // 文件选择标记
				this.checkDataList = [] // 最终数据
				this.isChoose = false
			},
			okeyHandle() {
				this.$emit("selected", this.checkDataList)
				
				console.log("okeyHandle")
				console.log(this.checkDataList)
				this.closeHandle()
			},
			choose() {
				// #ifdef H5
				uni.showModal({
					title: "警告",
					content: "这个组件只能在安卓下使用",
					showCancel: false
				})
				return
				// #endif
				// #ifndef APP-PLUS
				if (uni.getSystemInfoSync().platform !== "android") {
					uni.showModal({
						title: "警告",
						content: "这个组件只能在安卓下使用",
						showCancel: false
					})
					return
				}
				// #endif
				this.isChoose = true
				this.flileList = files.getRootDir()
			},
			backToPrevent() {
				let r = this.flag - 1
				if (r === 0) {
					this.flileList = files.getRootDir()
					this.treeList = ["root"]
				} else {
					this.flileList = files.getSubDir(this.treeList[r])
				}
				this.flag = r
			},
			setOrDelSelectData(path, size) {

				console.log("setOrDelSelectData size = " + size)
				let index = this.checkList.indexOf(path)
				if (index > -1) {
					this.$delete(this.checkList, index)
					this.$delete(this.checkDataList, index)
				} else {
					console.log("setOrDelSelectData count = " + this.count)
					console.log("setOrDelSelectData length = " + this.checkList.length)
					if (this.count > this.checkList.length) {
						this.checkList.push(path)
						let fname = path.substr(path.lastIndexOf('/') + 1);//截取文件名称字符串
						console.log("fname = " + fname )
						this.checkDataList.push({
							path: "file://" + path,
							name: fname,
							size: size
						})
					}
				}
			},
			showDir(isDir, path) {
				let _this = this
				if (isDir) {
					this.treeList.push(path)
					this.flileList = files.getSubDir(path)
					this.flag += 1
				} else {
					uni.getFileInfo({
						filePath: "file:///" + path.toString(),
						success(r) {
							_this.setOrDelSelectData(path.toString(), r.size)
						},
						fail(err) {
							console.log("err:", err);
						}
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	.file-select-container {
		width: 100%;
		height: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.file-select-wrap {
		width: 600upx;
		height: 800upx;
		overflow: hidden;
		background: #fff;
	}

	.file-select-header {
		width: 100%;
		height: 100upx;
		border-bottom: 2upx solid #eee;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30upx;
	}

	.s-f-scroll-view {
		width: 600upx;
		height: 600upx;
		overflow: hidden;
		background: #fff;
	}

	.s-f-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 30upx;
		border-bottom: 1upx solid #eee;
		line-height: 1;
	}

	.s-f-icon {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
		padding-left: 10upx;
	}

	.s-f-item-path-name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.s-f-text {
		width: 400upx;
		white-space: pre-wrap;
		word-break: break-all;
		line-height: 1;
	}

	.file-select-footer {
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.file-select-footer .s-f-btn {
		padding: 10upx 20upx;
		border: 2upx solid #eee;
		margin-right: 30upx;
		border-radius: 8upx;
	}
</style>
